<template>
  <div class="user-info">
    <el-card class="top">
      <el-button type="primary" :loading="printLoading" v-print="printConfig">打印</el-button>
    </el-card>
    <el-card class="content">
      <div class="user-info-container" id="user-info-container">
          <!-- 标题 -->
          <h1 class="title">员工信息</h1>
          <!-- 头部 -->
          <div class="header">
            <el-descriptions :column="2" border class="descriptions-class">
              <el-descriptions-item
                label="姓名"
              >
                {{ detailData.username }}
              </el-descriptions-item>
              <el-descriptions-item
                label="性别"
              >
                {{ detailData.gender }}
              </el-descriptions-item>
              <el-descriptions-item
                label="民族"
              >
                {{ detailData.nationality }}
              </el-descriptions-item>
              <el-descriptions-item
                label="手机号"
              >
                {{ detailData.mobile }}
              </el-descriptions-item>
              <el-descriptions-item
                label="居住地"
              >
                {{ detailData.address }}
              </el-descriptions-item>
              <el-descriptions-item
                label="入职时间"
              >
                {{ $filter.dateFilter(detailData.openTime) }}
              </el-descriptions-item>
              <el-descriptions-item
                label="备注"
                :span="2"
              >
                <el-tag
                  v-for="item in detailData.remark"
                  :key="item"
                  size="small"
                  class="remark"
                >{{ item }}</el-tag>
              </el-descriptions-item>
              <el-descriptions-item
                label="联系地址"
                :span="2"
              >
                {{ detailData.address }}
              </el-descriptions-item>
            </el-descriptions>
            <div class="avatar-box">
              <img :src="detailData.avatar" alt="">
            </div>
          </div>
          <!-- 内容 -->
          <el-descriptions direction="vertical" :column="1" border>
            <el-descriptions-item
              label="经历"
            >
              <ul class="post-list">
                <li class="post-list-item" v-for="(item, index) in detailData.experience" :key="index">
                  <span>{{ $filter.dateFilter(item.startTime) }} --- {{$filter.dateFilter(item.endTime)  }}</span>
                  <span>{{ item.title }}</span>
                  <span>{{ item.desc }}</span>
                </li>
              </ul>
            </el-descriptions-item>
            <el-descriptions-item
              label="专业"
            >
              {{ detailData.major }}
            </el-descriptions-item>
            <el-descriptions-item
              label="荣耀"
            >
              {{ detailData.glory }}
            </el-descriptions-item>
          </el-descriptions>
          <!-- 底部 -->
          <div class="footer">
            签字：___________日期:___________
          </div>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { userDetail } from '@/api/user-manage'
import { ref, defineProps } from 'vue'
const props = defineProps({
  id: {
    type: String,
    required: true
  }
})
const detailData = ref({})

const printLoading = ref(false)
const printConfig = ref({
  id: 'user-info-container',
  popTitle: 'larry-admin-element-plus',
  beforeOpenCallback (vue) {
    printLoading.value = true
    console.log('beforeOpenCallback')
  },
  openCallback (vue) {
    printLoading.value = false
    console.log('执行了打印')
  }
})
const getUserDetail = async () => {
  detailData.value = await userDetail(props.id)
  console.log(detailData.value)
}
getUserDetail()
</script>

<style lang="scss" scoped>
.user-info {
  .top {
    margin-bottom: 20px;
    text-align: right;
  }
}
.title {
  font-size: 24px;
  text-align: center;
  margin-bottom: 20px;
}
.footer {
  margin-top: 20px;
  text-align: right;
}
.user-info-container {
  width: 1024px;
  margin: 0 auto;
  .header {
    display: flex;
    .avatar-box {
      width: 187px;
      box-sizing: border-box;
      img {
        padding: 20px;
        width: calc(100% - 40px);
        height: calc(100% - 40px);
      }
    }
    .descriptions-class {
      flex: 1;
      .remark {
        margin-right: 10px;
      }
    }
  }
  .post-list {
    list-style: none;
    li {
      span {
        margin-right: 40px;
      }
    }
  }
}
</style>
